<template>
	<view class="suspend">
		<view class="suspend_title">
			<view class="title">
				我的请假
			</view>
			<view class="opera-btn" @click="suspension" v-if="roles=='technician'">
				<view class="btn">
					请假申请
				</view>
			</view>
		</view>
		<view class="askForLeave">
			<text>休假：{{ length }}次；休假{{ days }}天</text>
		</view>
		<view class="content">
			<view class="item" v-for="item in list">
				<view class="">
					请假类型：{{ item.typeName }}
				</view>
				<view class="">
					请假时间：{{ item.beginTime }}-{{ item.endTime }}
				</view>
				<view class="">
					请假说明：{{ item.reason }}
				</view>
				<view class="">
					审批结果：
					<text :style="{ color: status[item.state].color }">
						{{ status[item.state].title }}
					</text>
				</view>
				<view class="">
					审批人：{{ item.approverName }}
				</view>
				<view class="btnContent flex align-center" v-if="item.state == '0' && roles == 'store'">
					<view class="btn1" @click="getrefuse(item)">
						拒绝
					</view>
					<view class="btn2" @click="getsure(item)">
						通过
					</view>
				</view>
				<view class="operate" v-else>
					<view class="btn2" @click="HolidayEdit(item)">
						修改
					</view>
					<view class="btn1" @click="HolidayDel(item)">
						取消
					</view>
				</view>
			</view>


		</view>
		<view class="" style="height: 100rpx;">

		</view>
		<you-popup :popupVisible="shopVisible" :popupTitle="popupTitle == 1 ? '请假' : popupTitle == 3 ? '修改请假': '失败'"
			@popupClose="clickCancel" @cancel="clickCancel" @confirm="clickConfirm" bgColor="#fff" dialogWidth="700rpx"
			dialogHeight="760rpx">
			<view slot="popupContent">
				<!-- 标题 -->
				<view class="popup-contain" v-if="popupTitle == 1 || popupTitle == 3">
					<view class="popup">
						<view class="popup-item">
							<view class="title">
								请假类型
							</view>
							<view class="popupTime">
								<view class="begin">
									<uni-data-select :border="false" v-model="value" :localdata="array1"
										@change="bindPickerChange"></uni-data-select>
								</view>
							</view>
						</view>
						<view class="popup-item">
							<view class="title">选择开始时间</view>
							<view class="popupTime">
								<view class="begin" @click="show = true">
									{{ begintime }}
								</view>
							</view>
						</view>
						<view class="popup-item">
							<view class="title">选择结束时间</view>
							<view class="popupTime">
								<view class="end" @click="showend = true">
									{{ endtime }}
								</view>
							</view>
						</view>
						<view class="popup-item">
							<view class="title">理由</view>
							<view class="popupTime">
								<view class="end">
									<input type="text" style="height: 74rpx;"
										placeholder-style="fontSize:27rpx;color:#666666" v-model="remark"
										placeholder="请输入内容">
								</view>
							</view>
						</view>
						<view class="btnpms" @click="checkLeaveDays" style="">
							提交
						</view>
					</view>

				</view>
				<view class="popup-contain" v-else>
					<text class="popup-containText">
						你的暂停申请提交失败。
						1、请检查暂停时间段是否有预约订单；
						2、请检查暂停结束时间是否临近有预约单，请预留服务的准备时间；
						3、核对您当前的服务状态和申请状态是否相同；
					</text>
				</view>
			</view>
		</you-popup>
		<u-datetime-picker :show="show" v-model="value1" mode="datetime" @confirm='confirm' @cancel='close'
			:minDate="Date.now()" :closeOnClickOverlay="true"></u-datetime-picker>

		<u-datetime-picker :show="showend" v-model="value2" mode="datetime" @confirm='confirm2' @cancel='close2'
			:minDate="Date.now()"></u-datetime-picker>

		<u-popup :show="showall" mode="center" :round="10" @close="close">
			<view class="popup">
				<view class="title">通过审批</view>
				<view class="item">确定给{{ name }},通过请假审批吗？</view>
				<view class="button">
					<view class="sure" @click="madesure">
						确定
					</view>
					<view class="contel" @click="madeconcel">
						拒绝
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="askLeaveShow" mode="center" :round="10" @close="askclose">
			<view class="popup">
				<view class="title">提示</view>
				<view class="item">{{askContent}}</view>
				<view class="button">
					<view class="sure" @click="sureparus">
						确定
					</view>
					<view class="contel" @click="askclose">
						拒绝
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getholidayList,
		getappHolidayRule,
		addholiday,
		upateholiday,
		editHoliday,
		delHoliday,
		holidayCheckLeaveDays
	} from '@/api/system/work'
	import YouPopup from "@/components/you-popup/index.vue"
	import PickerForm from '@/components/pickerForm/index.vue'
	export default {
		components: {
			YouPopup,
			PickerForm
		},
		props: {
			// storeId: Number, // 声明message属性
			storeId: {
				type: Number,
				default: 0
			}
		},
		watch: {
			storeId: {
				handler(newVal, oldVal) {
					this.storeIds = newVal
					this.getholidayList()
				}
			},
			shopVisible: {
				handler(newVal, oldVal) {
					this.getholidayList()
				}
			}
		},
		data() {
			return {
				value222: 2,
				evaluate: {
					satisfaction: 1,
				},
				array1: [],
				index: 0,
				nameArray: [],
				everyTimeDays: '',
				days: '',
				length: '',
				roles: '',
				showall: false,
				name: '',
				userId: '',
				remark: '',
				storeIds: '',
				show: false,
				showend: false,
				type: '',
				value1: Number(new Date()),
				value2: Number(new Date()),
				begintime: '请选择开始时间',
				endtime: '请选择结束时间',
				timeItem: '',
				popupTitle: 1,
				shopVisible: false,
				item: {
					type: 'picker',
					label: '工作时间',
					key: 'workBeginTime',
					Time: true,
					isRange: true,
					isSecond: true,
				},
				status: {
					'0': {
						title: '未审核',
						color: '#01B961'
					},
					'1': {
						title: '通过',
						color: '#01B961'
					},
					'2': {
						title: '拒绝',
						color: '#FE1313 '
					},
				},
				pickerForm: {},
				ruleForm: {},
				dateList: [],
				list: [],
				value: '',
				editItem: {},
				askLeaveShow: false,
				askContent: '',

			}
		},
		mounted() {
			// const selectedOption = this.array1[this.index];
			// this.everyTimeDays=selectedOption.everyTimeDays
			// this.type=selectedOption.id
			const userId = uni.getStorageSync('userId');
			this.userId = userId
			const roles = uni.getStorageSync('role');
			this.roles = roles
			if (this.userId) {
				this.getholidayList()
			}
			if (this.roles == 'technician') {
				this.getappHolidayRule()
			}

		},
		created() {
			const userId = uni.getStorageSync('userId');
			this.userId = userId
			const roles = uni.getStorageSync('role');
			this.roles = roles
			if (this.userId) {
				this.getholidayList()
			}
			if (this.roles == 'technician') {
				this.getappHolidayRule()
			}
		},
		methods: {
			getrefuse(item) {
				this.showall = true
				this.id = item.id
				this.name = item.userName
			},
			getsure(item) {
				this.showall = true
				this.id = item.id
				this.name = item.userName
			},
			madesure() {
				upateholiday({
					id: this.id,
					state: 1
				}).then(res => {
					if (res.code == 200) {
						this.getholidayList()
						this.showall = false
					}
				})
			},
			madeconcel() {
				upateholiday({
					id: this.id,
					state: 2
				}).then(res => {
					if (res.code == 200) {
						this.getholidayList()
						this.showall = false
					}
				})
			},
			getholidayList() {
				const data = uni.getStorageSync('technician');
				console.log(data.name);
				if (this.roles == 'technician') {
					getholidayList({
						userId: this.userId
						// pageNum:1,
						// pageSize:10,
						// userName:data.name,
					}).then(res => {
						this.list = res.rows
						this.days = this.list.reduce((total, current) => {
							if (current.state === "1") {
								return total + current.days;
							} else {
								return total;
							}
						}, 0);
						this.length = this.list.reduce((count, current) => {
							if (current.state === "1") {
								return count + 1;
							} else {
								return count;
							}
						}, 0);
					})
				} else {
					getholidayList({
						storeId: this.storeIds,
						approverId: this.userId
						// pageNum:1,
						// pageSize:999,
						// userName:data.name,
					}).then(res => {
						this.list = res.rows
						this.days = this.list.reduce((total, current) => {
							if (current.state === "1") {
								return total + current.days;
							} else {
								return total;
							}
						}, 0);
						this.length = this.list.reduce((count, current) => {
							if (current.state === "1") {
								return count + 1;
							} else {
								return count;
							}
						}, 0);
					})
				}
			},

			getappHolidayRule() {
				getappHolidayRule().then(res => {
					this.array1 = res.rows.map(rItem => {
						return {
							text: rItem.type,
							value: rItem.id,
							everyTimeDays: rItem.everyTimeDays
						}
					})
					this.generateNameArray();
				})
			},
			suspension() {
				this.shopVisible = true;
				this.popupTitle = 1
			},
			bindPickerChange(e) {
				const selectedOption = this.array1.find(item => item.value === e);
				if (selectedOption) {
					this.type = selectedOption.text
					this.everyTimeDays = selectedOption.everyTimeDays
				}
				console.log(this.type);
			},
			generateNameArray() {
				this.nameArray = this.array1.map(item => item.name);
			},
			confirm(value) {
				this.value1 = value.value;
				const timestamp = this.value1;
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				this.show = false;
				if (formattedDateTime) {
					this.begintime = formattedDateTime;
					const selectedOption = this.array1[this.index];
					this.everyTimeDays = selectedOption.everyTimeDays
					// this.printLeaveDates(formattedDateTime, this.everyTimeDays);
				}

			},
			confirm2(value) {
				this.value2 = value.value;
				const timestamp = this.value2;
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				this.showend = false;
				if (formattedDateTime) {
					this.endtime = formattedDateTime;
					const selectedOption = this.array1[this.index];
					this.everyTimeDays = selectedOption.everyTimeDays
					this.printLeaveDates(formattedDateTime, this.everyTimeDays);
				}

			},
			printLeaveDates(startDate, days) {
				const startDateObj = new Date(startDate);
				for (let i = 0; i < days; i++) {
					const currentDate = new Date(startDateObj);
					currentDate.setDate(startDateObj.getDate() + i);
					const currentYear = currentDate.getFullYear();
					const currentMonth = String(currentDate.getMonth() + 1).padStart(2, '0');
					const currentDay = String(currentDate.getDate()).padStart(2, '0');
					const hours = String(currentDate.getHours()).padStart(2, '0');
					const minutes = String(currentDate.getMinutes()).padStart(2, '0');
					const seconds = String(currentDate.getSeconds()).padStart(2, '0');
					const formattedCurrentDate =
						`${currentYear}-${currentMonth}-${currentDay} ${hours}:${minutes}:${seconds}`;
					this.dateList.push(formattedCurrentDate); // 将日期字符串推入数组中
				}
				this.endtime = this.dateList[this.dateList.length - 1]
			},
			sureparus() {
				const data = uni.getStorageSync('technician');
				const roles = uni.getStorageSync('roles');
				const params = {
					reason: this.remark,
					beginTime: this.begintime,
					endTime: this.endtime,
					type: this.value,
					// typeName:this.type,
					regionId: data.belongAreaId,
					storeId: data.belongStoreId,
					roleId: roles,
					zyTechnicianId: data.userId
				}
				if (this.popupTitle == 1) {
					addholiday(params).then(res => {
						this.askLeaveShow = false
						this.clickCancel()
						let that = this
						if (res.code != 200) {
							uni.showModal({
								title: "提示",
								content: res.msg,
								success: function(res) {
									if (res.confirm) {
										that.getholidayList()
									}
								}
							})
						}
					})
					// }).catch((data) => {
					// 	console.log(data, 'data');
					// 	this.askLeaveShow = false
					// 	this.clickCancel()
					// 	this.getholidayList()
					// 	this.$modal.confirm(data.msg).then(() => {

					// 	})

					// })
				} else {
					const data = uni.getStorageSync('technician');
					this.editItem.reason = this.remark,
						this.editItem.beginTime = this.begintime,
						this.editItem.endTime = this.endtime,
						this.editItem.type = this.value,
						this.editItem.typeName = this.array1.find(el => el.value == this.value).text,
						this.editItem.zyTechnicianId = data.userId
					editHoliday(this.editItem).then(res => {
						uni.showToast({
							title: '修改成功！',
							icon: 'none'
						})
						this.clickCancel()
						this.getholidayList()
					})
				}

			},
			// 判断休假天数
			checkLeaveDays() {
				const data = uni.getStorageSync('technician');
				let obj = {
					beginTime: this.begintime,
					endTime: this.endtime,
					type: this.value,
					zyTechnicianId: data.userId,
				};

				return new Promise((resolve, reject) => {
					holidayCheckLeaveDays(obj).then((res) => {
						let _this = this;
						if (res.code == 200) {
							if (res.data.ifExceed && res.data.exceedDay != "") {
								this.askContent = res.data.exceedDay + ' ' + "是否确定继续提交"
								this.shopVisible = false
								this.askLeaveShow = true
							} else {
								this.sureparus()
							}
						}
					});
				});
			},
			clickCancel() {
				this.shopVisible = false
				this.dateList = []
				this.remark = null
				this.value = ''
				this.begintime = '请选择开始时间'
				this.endtime = '请选择结束时间'
			},
			clickItem(item) {
				this.timeItem = item
			},
			setPickerForm(pickerForm) {
				this.pickerForm = pickerForm
			},
			close() {
				this.show = false
			},
			askclose() {
				this.askLeaveShow = false
				this.shopVisible = true
			},
			close2() {
				this.showend = false
			},
			//修改请假时间
			HolidayEdit(item) {
				this.editItem = item
				this.popupTitle = 3
				this.value = item.type
				this.begintime = item.beginTime
				this.endtime = item.endTime
				this.remark = item.reason
				this.shopVisible = true
			},
			HolidayDel(item) {
				delHoliday(item.id).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消成功！',
							icon: 'none'
						})
						this.getholidayList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-select {
		border: 0;
	}

	::v-deep .uni-select__input-placeholder {
		color: #666666;
		font-size: 14px;
	}

	::v-deep .popup-contain .popup .popup-item {
		height: 55px !important;
	}

	.popup {
		width: 600rpx;
		height: 400rpx;

		.title {
			font-weight: bold;
			color: #333333;
			width: 600rpx;
			text-align: center;
			line-height: 68rpx;
			// background-color: #C27E15;
			color: #fff;
			border-radius: 32rpx;
			font-size: 33rpx;
		}

		.item {
			font-weight: 400;
			font-size: 38rpx;
			width: 100%;
			color: #333333;
			text-align: center;
			padding: 20px 20px 0 20px;
			box-sizing: border-box;
		}

		.button {
			display: flex;
			justify-content: space-around;
			margin-top: 100rpx;

			.sure {
				width: 162rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background-color: #C27E15;
				color: #fff;
				border-radius: 32rpx;
				font-size: 33rpx;
			}

			.contel {
				width: 162rpx;
				height: 68rpx;
				color: #C27E15;
				border-radius: 32rpx;
				text-align: center;
				line-height: 68rpx;
				font-size: 33rpx;
				background-color: #F5F4F4;
			}
		}
	}

	.btnContent {
		height: 130rpx;
		line-height: 130rpx;
		border-top: 1rpx solid #e6e6e6;

		.btn1 {
			width: 200rpx;
			height: 82rpx;
			font-size: 42rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			text-align: center;
			line-height: 74rpx;
			border-radius: 45rpx;
			text-align: center;
			border: 1px solid #FE1313;
			background-color: red;
			color: #000000;
			margin-left: 80rpx;
		}

		.btn2 {
			width: 200rpx;
			height: 82rpx;
			text-align: center;
			line-height: 74rpx;
			font-size: 42rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			border-radius: 45rpx;
			text-align: center;
			border: 1px solid #01B960;
			margin-left: 20rpx;

			background-color: #01B960;
			color: #fff;
		}
	}

	.operate {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-top: 1rpx solid #e6e6e6;
		font-size: 28rpx !important;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 10rpx;
		padding-top: 10rpx;

		.btn2 {
			background-color: #c27e15;
			color: #fff;
			border-radius: 25px;
			width: 45%;
			text-align: center;
		}

		.btn1 {
			background-color: #fff;
			border: 1rpx solid #c27e15;
			color: #c27e15;
			border-radius: 25px;
			width: 45%;
			text-align: center;
		}
	}

	.suspend {
		.suspend_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-top: 20rpx;

			.title {
				font-size: 50rpx;
				font-weight: 500;
				color: #000000;
				line-height: 55rpx;
				height: 55rpx;
			}

			.opera-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 210rpx;

				.view-time,
				.btn {
					width: 100%;
					height: 75rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2rpx solid #c27e15;
					border-radius: 50rpx;
					font-size: 30rpx;
					color: #c27e15;
				}

				.btn {
					color: #FFF;
					background-color: #c27e15;
				}
			}
		}

		.askForLeave {
			width: 100%;
			font-size: 30rpx;
		}

		// .title {
		// 	margin: 43rpx 0;

		// 	>text:first-child {
		// 		font-size: 50rpx;
		// 		font-weight: 500;
		// 		color: #000000;
		// 		line-height: 59rpx;
		// 	}

		// 	>text:last-child {
		// 		font-size: 40rpx;
		// 		font-weight: 400;
		// 		color: #333333;
		// 		line-height: 60rpx;
		// 	}

		// }

		.content {
			.item {
				background-color: #ffffff;
				padding: 28rpx 43rpx;
				margin-bottom: 24rpx;

				>view {
					font-size: 42rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 60rpx;
				}

				.btnContent {
					height: 130rpx;
					line-height: 130rpx;
					border-top: 1rpx solid #e6e6e6;

					.btn1 {
						width: 234rpx;
						height: 82rpx;
						font-size: 42rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 82rpx;
						border-radius: 45rpx;
						text-align: center;
					}
				}
			}
		}
	}

	.popup-contain {
		.title {
			font-size: 30rpx;
			font-family: Source Han Sans SC, Source Han Sans SC;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
		}

		.timeItem {
			margin: 10rpx 0;
			width: 147rpx;
			height: 60rpx;
			border-radius: 13rpx 13rpx 13rpx 13rpx;
			opacity: 1;
			border: 1rpx solid #C27E15;
			color: #c27e15;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.active {
			background: #C27E15;
			color: #fff;
		}

		.popup {
			.popup-item {
				display: flex;
				align-items: center;

				.title {
					width: 200rpx;
				}
			}

		}
	}

	.popup-containText {
		font-size: 30rpx;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}

	.btn {
		background-color: #C27E15;
		color: #fff;
		width: 671rpx;
		height: 94rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		line-height: 45rpx;
	}

	.popupTime {
		// background-color: #C27E15;
		margin-left: 24rpx;
		line-height: 36rpx;

		.begin {
			width: 354rpx;
			height: 64rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			// border: 1rpx solid #777777;
			color: #666666;
			text-align: center;
			line-height: 64rpx;
		}

		.end {
			width: 354rpx;
			height: 64rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			border: 1rpx solid #777777;
			color: #666666;
			text-align: center;
			line-height: 64rpx;
		}
	}

	.btnpms {
		width: 559rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		opacity: 1;
		border: 1rpx solid #C27E15;
		color: #c27e15;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 5rpx;

	}

	.active {
		background: #C27E15;
		color: #fff;
	}

	.popup {
		.popup-item {
			display: flex;
			align-items: center;

			.title {
				width: 200rpx;
			}
		}
	}


	.popup-containText {
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 45rpx;
		text-align: left;
		display: flex;
	}

	.btn {
		background-color: #C27E15;
		color: #fff;
		width: 671rpx;
		height: 94rpx;
		font-size: 38rpx;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		line-height: 45rpx;
	}

	.popupTime {
		// background-color: #C27E15;
		margin-left: 24rpx;
		line-height: 36rpx;

		.begin {
			width: 354rpx;
			height: 74rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			border: 1rpx solid #777777;
			color: #666666;
			text-align: center;
			line-height: 64rpx;
		}

		.end {
			width: 354rpx;
			height: 74rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
			border: 1rpx solid #777777;
			color: #666666;
			text-align: center;
			line-height: 64rpx;
		}
	}

	.btnpms {
		width: 559rpx;
		height: 94rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		opacity: 1;
		background-color: #C27E15;
		text-align: center;
		line-height: 94rpx;
		// margin-top: 24rpx;
		margin: 24rpx auto;
		font-size: 38rpx;
		color: #FFFFFF;
	}
</style>